<template>
	<div class="app-container">
		<el-form :model="addData" label-position="left" size="small">
			<el-form-item label="加盟标题" :label-width="formLabelWidth">
				<el-input placeholder="请输入内容" v-model="addData.hzTitle"></el-input>
			</el-form-item>
			<el-form-item label="品牌说明" :label-width="formLabelWidth">
				<tinymce :height="300" v-model="addData.hzDesc" id='tinymce1' :menubar="'false'"></tinymce>
			</el-form-item>
			<el-form-item label="门店风采" :label-width="formLabelWidth">
				<el-row>
					<el-col :span="12">
						<el-upload class="upload-demo" :action="host+'/admin/img/0'" :on-remove="handleRemove" multiple :file-list="fileList" :headers="headers" :before-upload="beforeAvatarUpload" :on-success="handleSuccess">
							<el-button size="small" type="primary">点击上传</el-button>
							<div slot="tip" class="el-upload__tip">只能上传文件 GPG/PNG/MP4 格式</div>
						</el-upload>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer bottom-center">
			<el-button @click="clearAction">{{ $t('table.cancel') }}</el-button>
			<el-button type="primary" @click='submit'>{{ $t('table.confirm') }}</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getRddJoinInfo,
		updateRddJoinInfo
	} from "@/api/cooperate"
import waves from "@/directive/waves"; // Waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import tinymce  from '@/components/Tinymce'

const calendarTypeOptions = [
{ key: "CN", display_name: "China" },
{ key: "US", display_name: "USA" },
{ key: "JP", display_name: "Japan" },
{ key: "EU", display_name: "Eurozone" }
];

// arr to obj ,such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
	acc[cur.key] = cur.display_name;
	return acc;
}, {});

export default {
	name: "ComplexTable",
	components: { 
		Pagination,
		tinymce,
	},
	directives: { waves },
	filters: {
	},
	data() {
		return {
			addData: {
				hzTitle: '',
				hzDesc: '',
			},
			sourceData: {},
			formLabelWidth: '120px',
			host: process.env.BASE_API,
			fileList: [],
			headers: {
				Authorization: "Bearer " + this.$store.state.user.token
			},
		};
	},
	created() {
		this.init();
	},
	methods: {
		async init() {
			const res = await getRddJoinInfo();
			this.addData = JSON.parse(JSON.stringify(res.data.data));
			this.sourceData = JSON.parse(JSON.stringify(res.data.data));
			if(res.data.data.hzFile) {
				this.fileList = JSON.parse(res.data.data.hzFile);
			}
		},

		clearAction() {
			this.addData.hzTitle = this.sourceData.hzTitle;
			this.addData.hzDesc = this.sourceData.hzDesc;
			if(this.sourceData.hzFile) {
				this.fileList = JSON.parse(this.sourceData.hzFile);
			}
		},

		handleRemove(file, fileList) {
			this.fileList = fileList;
		},

		beforeAvatarUpload(file) {
			const isFixed = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'video/mp4';
			if (!isFixed) {
				this.$message.error('只能上传文件 GPG/PNG/MP4 格式!');
			}
			return isFixed;
		},

		handleSuccess(file, fileList) {
			this.fileList.push({
				name: fileList.name,
				url: fileList.response.data.file,
				type: fileList.raw.type
			})
		},

		async submit() {
			this.addData.hzFile = JSON.stringify(this.fileList);
			const res = await updateRddJoinInfo(this.addData);
			if(res.data.code == 0) {
				this.$notify({
					title: "成功",
					message: "提交成功",
					type: "success",
					duration: 2000
				});
			}
		},
	}
};
</script>
